﻿@page "/heatmap-chart/empty-points"

@using Syncfusion.Blazor.HeatMap
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the number of defective product count per 1000 units coming out from a manufacturing unit. Data points are enhanced with Labels and Tooltip. Some data points were not marked with any values which indicates there are no defective products and these data points are termed as empty points.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render empty points in the Heatmap. The empty points or the points with no data can be marked using <code>null</code> in the DataSource. You can also customize the background color of the empty points by using the <code>EmptyPointColor</code> property in <code>HeatMapPaletteSettings</code>.</p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfHeatMap DataSource="@DataSource">
                <HeatMapXAxis Labels="@XLabels"></HeatMapXAxis>
                <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
                <HeatMapTitleSettings Text="Defective Count per 1000 Products from a Manufacturing Unit"></HeatMapTitleSettings>
                <HeatMapPaletteSettings Type="@SFHeatMap.PaletteType.Gradient">
                    <HeatMapPalettes>
                        <HeatMapPalette Color="rgb(172, 213, 242)"></HeatMapPalette>
                        <HeatMapPalette Color="rgb(127, 168, 201)"></HeatMapPalette>
                        <HeatMapPalette Color="rgb(82, 123, 160)"></HeatMapPalette>
                        <HeatMapPalette Color="rgb(37, 78, 119)"></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
                <HeatMapLegendSettings ShowLabel="true"
                                       Position="@SFHeatMap.LegendPosition.Bottom"
                                       Width="250px">
                </HeatMapLegendSettings>
                <HeatMapCellSettings ShowLabel="false">
                    <HeatMapCellBorder Width="0"  Color="White"></HeatMapCellBorder>
                </HeatMapCellSettings>
            </SfHeatMap>
        </div>
    </div>
</div>

@code{
    string[] XLabels = new string[] { "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017" };
    string[] YLabels = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec" };
    int?[,] DataSource = HeatMapData.GetEmptyPointData();
}
